<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>main</title>
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/res/back/css/function/function.css" rel="stylesheet" type="text/css"/>
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//列表树
	$('#tt').treegrid({
	    url:'/ufunc/ajax_tree.do',
	    idField:'id',
	    treeField:'text',
	    onContextMenu: onContextMenu,
	    columns:[[
	        {title:'功能名称',field:'text',width:200},
	        {title:'类型',field:'type',width:50,formatter:function(value,row,index){
	        	if(value==1){
	        		return "菜单";
	        	}else if(value==2){
	        		return "按钮";
	        	}else{
	        		return "";
	        	}
	        }},
	        {title:'主功能',field:'attributes.ifFunction',width:50,formatter:function(value,row,index){
	        	if(row.attributes.ifFunction!=''){
	        		if(row.attributes.ifFunction == 1){
		        		value="是";
		        	}else if(row.attributes.ifFunction == 0){//判断空，因为空的时候是false  就是等于0了
		        		value="否";
		        	}
	        	}else{
	        		return "";
	        	}
	        	return value;
	        }},
	        {title:'显示方式',field:'attributes.showType',width:60,formatter:function(value,row,index){
	        	if(row.attributes.showType==1){
	        		value= "左侧";
	        	}else if(row.attributes.showType==2){
	        		value= "顶部";
	        	}else{
	        		value="";
	        	}
	        	return value;
	        }},
	        {title:'功能地址',field:'href',width:200},
	        {title:'描述',field:'attributes.descr',width:200,formatter:function(value,row,index){
	        	return row.attributes.descr;
	        }},
	        {title:'Code代号',field:'attributes.code',width:120,formatter:function(value,row,index){
	        	return row.attributes.code;
	        }},
	        {title:'左侧菜单图标', field:'ico',width:80,formatter:function(value,row,index){
	        	return "<span class='left_icon'><img class="+row.attributes.code+" /></span>" ;
	        }},
	        {title:'左侧权限图标', field:'funico',width:80,formatter:function(value,row,index){
	        	var iconurl=row.attributes.code;
	        	if(row.attributes.parentId!=0){
	        		iconurl="fun_"+row.attributes.code;
	        	}
	        	return "<img style='background-size:25px 25px;width:25px;height:25px;display:block;text-align:center' data-type='"+iconurl+"'/>" ;
	        }},
	    ]]
	});
})
//右键
 function onContextMenu(e,row){
      e.preventDefault();
      $(this).treegrid('select', row.id);
      $('#mm').menu('show',{
          left: e.pageX,
          top: e.pageY
      });
}
var dialog;
function appendp(){
//新建同级节点
document.formName.reset();
	var node = $('#tt').treegrid('getSelected');
	var hasp = $('#tt').treegrid("getParent",node.id);
	if(hasp==null){//没有父节点
	    	$("#parent_id").val(0);//父节点则为0
	}else{
	        $("#parent_id").val(hasp.id);
	}
	$("#id").val("");
    dia("新增同级");
}
//增子级
function appendc(){
	//新建子级节点
	document.formName.reset();
	var node = $('#tt').treegrid('getSelected');
	$("#parent_id").val(node.id);
	$("#id").val("");
	dia("新增子级");
}

function dia(title){//弹窗
   dialog = art.dialog({
        title: title,
        width:500,
        lock:true,
        content: document.getElementById('createfunction')
    });
}
//提交
function sub(){
	if($("#signupForm").valid()){
	$.ajax({
		   type: "POST",
		   dataType:"json",
		   url: "/ufunc/ajax_add.do",
		   data:$("form").serialize(),
		   beforeSend:function(){
			   art.dialog.tips("加载中.....");
		   },
		   success: function(data){
			   if(data.success){
				   location.reload();
			   }
		   }
	});
	};
}
$().ready(function(){
	 //验证表单
   $("#signupForm").validate({
   	rules:{
   		name:{
   			required:true,
   			maxlength:10
   		},
   		uri:{
   			required:true,
   		},
   		sortNum:{
   			required:true,
	   		digits:true,
			maxlength:3
   		},
		type : {required : true}
   	}
   });
});
//编辑
function editcurrent(){
	var node = $('#tt').treegrid('getSelected');
	$("#id").val(node.id);
	$("#name").val(node.text);
	$("#uri").val(node.href);
	$("#sortNum").val(node.sortnum);
	$('#type').val(node.type);
	$('#ifFunction').val(node.attributes.ifFunction);
	$('#showType').val(node.attributes.showType);
	$('#code').val(node.attributes.code);
	$('#icon').val(node.attributes.icon);
	$('#funIcon').val(node.attributes.funIcon);
	$('#descr').val(node.attributes.descr);
	dia("编辑");
}
//删除
function del(){
	var node = $('#tt').treegrid('getSelected');
	$.ajax({
		   type: "get",
		   dataType:"json",
		   url: "/ufunc/ajax_del.do",
		   data:{id:node.id},
		   beforeSend:function(){
			   art.dialog.tips("删除中....");
		   },
		   success: function(data){
			   if(data.success){
				   location.reload()
			   }
		   }
	});
}
</script>
<style type="text/css">
#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
#rMenu ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
}
.form-control{width:200px;}
.form-group{margin:5px 15px}


.left_icon img {
    width: 13px;
    height: 13px;
    margin: 5px 5px;
    background: url(/res/common/images/funIcon/left/backicon.png) no-repeat;
}


</style>
</head>
<body>

<div style="overflow:auto;height:96%"><table id="tt" class="table" ></table></div>
<!-- 右键 -->
<div id="mm" class="easyui-menu" style="width:120px;height:100px">
    <div onclick="appendp()"  >新建同级</div>
    <div onclick="appendc()"  >新建子级</div>
    <div onclick="editcurrent()" >编辑</div>
    <div class="menu-sep"></div>
    <div onclick="del();" >删除</div>
</div>
<!-- 新建權限 -->
<div id="createfunction"  style="display: none;height:380px;"   >
	<form  id="signupForm" class="form-horizontal" name="formName"  role="form"  onsubmit="beforesub();"  >
	<input type="hidden"  name="parentId"  id="parent_id"   />
	<input type="hidden"  name="id"  id="id"   />
	<input type="hidden" name="roleType" id="roleType" value="${RequestParameters['type']!}"/>
	  <div class="form-group">
	    <label class="col-sm-4 control-label" for="name" >名称：</label>
	      <div class="col-sm-6">
	      <input class="form-control" maxlength="200" id="name" name="name"  />
	      </div>
	  </div>
	  <div class="form-group">
	    <label for="uri" class="col-sm-4 control-label">地址：</label>
	     <div class="col-sm-6">
	      <input  class="form-control" id="uri" maxlength="200" name="uri"  >
	      </div>
	  </div>
        <div class="form-group">
            <label for="type" class="col-sm-4 control-label">类型：</label>
            <div class="col-sm-6">
            <select name="type" id="type" class="form-control" required>
                <option value="1">菜单</option>
                <option value="2">按钮操作</option>
            </select>
            </div>
        </div>
        <div class="form-group">
            <label for="ifFunction" class="col-sm-4 control-label">主功能：</label>
            <div class="col-sm-6">
            <select name="ifFunction" id="ifFunction" class="form-control" required>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
            </div>
        </div>
        <div class="form-group">
            <label for="showType" class="col-sm-4 control-label">显示方式：</label>
            <div class="col-sm-6">
            <select name="showType" id="showType" class="form-control" required>
                <option value="1">左侧</option>
                <option value="2">顶部</option>
            </select>
            </div>
        </div>
       <div class="form-group">
	    <label class="col-sm-4 control-label" for="name" >Code代号：</label>
	      <div class="col-sm-6">
	      <input class="form-control" maxlength="200" id="code" name="code"  />
	      </div>
	  </div>
	  <div class="form-group">
	    <label for="xuhao"  class="col-sm-4 control-label">序号：</label>
	    <div  class="col-sm-6">
	      <input type="text"   maxlength="100" id="sortNum" name="sortNum"  class="form-control"  required  />
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="descr" class="col-sm-4 control-label" >描述：</label>
	    <div class="col-sm-6">
	      <textarea style="resize:none;" class="form-control" maxlength="500" id="descr" name="descr" required></textarea>
	    </div>
	  </div>
	  <div class="form-group">
	    <div style="text-align: center;" >
	      <button  onclick="sub();"  type="button" class="btn btn-info">提交</button>
	    </div>
	  </div>
	</form>
</div>
</body>
</html>
